<template>
	<nav  class='nav-header' v-bind:class="classToggle">
		<div>

	        <router-link v-if="logoShow" class="logo"  to="/home/homepage">
	        	<span class="logo-lg"><i class="fa fa-book" aria-hidden="true"></i> <b>招商局</b> HR门户系统</span>        	
	        </router-link>
			<ul class='userManager'>
				<li class='setting' title="首页">
					<router-link :to="routeUrl" ><i class="fa fa-home"></i></router-link>
				</li>
				<li class='userSetting' :title="userName">
					<i class="icon-user iconMargin"></i><span>{{userName}}</span>
					<!--<ul class='dropDown'>
						<li>
							<img src="/static/images/user.svg" alt="">
							<p>{{userName}}</p>
						</li>
						<li>
							<a class=" salary-btn target-btn">个人设置</a>
							<a class=" loginout target-btn rt" v-if="hideLogin" @click="loginOut">注销</a>
							<router-link class="salary-btn1 target-btn rt" :to="routeUrl"> 首页</router-link>
							
						</li>
					</ul>-->
				</li>
				<li class='setting' title="设置">
					<router-link :to="routeUrl" ><i class="icon-setting"></i></router-link>
				</li>
				<!--<li class='setting' title="切换领导门户" >
					<router-link :to="routeUrl" ><i class="icon-leader"></i></router-link>
				</li>-->
				<li class='setting' title="退出" @click="loginOut"> 
					<a ><i class="icon-exit"></i></a>
				</li>
				<li class='settingRight'>
					<a ></a>
				</li>
			</ul>
		</div>
	</nav>
</template>

<script>
	import Vue from 'vue'
	import { Button, Select } from 'element-ui' 
	Vue.use(Button);
	export default {
		name:'topHeader',
		data() {
	      	return {
	      		headerVisible:false,
	      		styleVisible:false,
	      		imageWin:false,
	      		cropVisible:false,
	      		crpoImageUrl:'',
	      		cropperObj:{
		        	img:"",
		        	size: 1,
					outputType: 'jpeg',
					canScale: true,
					autoCrop: true,
					width: 200,
					height: 200,
					info:false,
					resizable:false
		        },
				small:false,
				userName:null,
			    
	      	}
	    },
		computed:{
			classToggle : function(){
                return {
                'small': !this.small,
                'big': this.small,
                'isFix':this.type === 'leader'
                }
			},
			
			routeUrl:function(){
				return "/employeeServ";
			},
			logoShow:function(){
				return this.type === "employee"
			},
			hideLogin:function(){
				return (location.hostname === "10.5.0.137" || location.hostname === "localhost");
			}
		},
		props:{
			isChangeBigWidth:{
				type : Boolean,
				default: false
			},
			type:{
				type:String,
				default:"leader"
			}
		},
		watch:{
			isChangeBigWidth : function(newValue, oldValue){
				if (newValue) {
					this.small = true;
				} else {
					this.small = false;
				}
			}	
		},
	    components:{
//			"v-cropper": vueCropper
		},
	    methods:{
			loginOut:function(){
				var self = this;
				this.Axios.Post(this.URL.exit.url,{}).then(function(res){
					location.reload();
				}).catch(function(){

				})
				
			}
	    },      
		created(){
			this.userName = localStorage.getItem('userName');
			this.emplid = localStorage.getItem('userId');
			console.log(this.emplid );
		},
	    mounted(){

	    }
	}
</script>

<style scoped>
	.nav-header{

		height:50px;
		line-height:50px; 
		background-color: #0268b3;
		color:#fff;
		left:0;
	}
	.nav-header .collapseBtn{				
			float:left;
			padding:0 14px 0 14px;		
	}
	.nav-header .target-btn{
	    display: inline-block;
	    color: #fff;
        vertical-align: top;
	    border-radius:5px;
	    padding: 0 15px;
	    height: 35px;
	    line-height: 35px;
	}
	.nav-header .target-btn:hover{
		cursor:pointer;
	}
	.salary-btn{
	  background: #5FB3F9;
	  width:60px;
	}
	.loginout{
	background: #5FB3F9;
	margin-left: 5px;
		width:30px;
	}
	.isFix{
		position:fixed;
		top:0;
		right:0;
		z-index:1000;
	}
	.small {
		left:230px;
		transition: left 0.4s ease-in-out;
	}
	.big {
		left:50px;
		transition: left 0.4s ease-in-out;
	}
	.nav-header .collapseBtn:hover{				
		background: rgba(0, 0, 0, 0.1);		
	}		
	

	.nav-header .userManager{
		font-size:16px;
		float:right; 
	}
	.nav-header .userManager>li{
		float:left;
		text-align: center;
		cursor:pointer;
	}
	.nav-header .userManager>li:hover{
		background: #004a80;
	}		
	.nav-header .userSetting{
		position: relative;
	    min-width: 58px;
	    line-height: 50px;
	    padding: 0 3px;
	}
	
	.nav-header .userManager>li>a{
		min-width:60px;
		line-height:50px;
		display:inline-block;
	}
	.nav-header .userManager>li.settingRight{
		width:30px;		
	}	
		
	.nav-header .userSetting .userPic{
		margin-right: 8px;
	}	
	
	.nav-header .userManager .dropDown{
		position: absolute;
		display:none; 
		padding: 1px 0 0 0;
		border-top-width: 0;
		width: 280px;
		top: 100%;
		z-index: 30000;
		right:0;
	}
	.nav-header .userManager .dropDown>li:first-child{
		background-color: #3c8dbc;
		height: 175px;
		padding: 10px;
		text-align: center;
	}
	.nav-header .userManager .dropDown>li:first-child+li{
		line-height: 50px;
		height:50px;
		background-color: #ecf0f5;
    	padding: 7px 10px;
	}
	.nav-header .userManager .dropDown>li:first-child+li>button:first-child{
		float: left;
	}
	.nav-header .userManager .dropDown>li:first-child+li>button:not(:first-child){
		float: right;
	}
	.nav-header .userManager .dropDown img{
		margin: auto;
		height: 90px;
		width: 90px;
		border: 3px solid;
		border-color: transparent;
		border-color: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}
	.nav-header .userManager .dropDown p{
		color: rgba(255, 255, 255, 0.8);
		font-size: 17px;
   		margin-top: 10px 0;
	}		
	.nav-header .userSetting:hover .dropDown{
		display:block; 
	}	
	.nav-header .iconMargin{
	    float: left;
	    margin-right: 2px;
	    float: left;
	    margin-top: 16px;	
	}
	.nav-header .logo {
	    background-color: #0268b3;
	    color: #ffffff;
	    border-bottom: 0 solid transparent;
	    display: block;
	    float: left;
	    height: 50px;
	    font-size: 20px;
	    line-height: 50px;
	    text-align: left;
	    width: 230px;
	    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	    padding: 0 0px 0px 50px;
	    font-weight: 300;
	    overflow: hidden;
	}

	.salary-btn1{
	  background: #5FB3F9;
	  width:40px;
	  text-align: center;
  	  margin: auto 15px;
	}
</style>